<template>
  <div>
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" :toolbar-config="toolbarConfig" />
  </div>
</template>
<script setup lang="ts">
import { getGoodsPageList, delGoods } from "@/api/product/goodsApi";
import { MPage as Page } from "page-com";
import { PageSearchConfig, PageTableConfig, ToolbarConfig, PageInstance } from "page-com";
import { provide, reactive, shallowReactive, useTemplateRef } from "vue";
import { msgConfirm, successMsg } from "@/utils/message";
import { hasPerms } from "@/utils/auth";
import { getBrandSelect } from "@/api/product/brandApi";
import productEnum from "@/enums/productEnum";
import use from "@/utils/use";
import { useOffineIcon } from "@/components/ReIcon/src/hooks";
const { gotoPage } = use();
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "goodsName",
      label: "商品名称"
    },
    {
      frameType: "select",
      key: "saleStatus",
      options: productEnum.ShopGoodsSaleStatusEnums,
      label: "上架状态"
    },
    {
      frameType: "datetimerange",
      key: "createTime",
      searchKey: ["createTimeStart", "createTimeEnd"],
      label: "创建时间"
    }
  ],
  searchFun: getGoodsPageList
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "goodsName",
      label: "商品名称"
    },
    {
      key: "goodsDesc",
      label: "商品描述"
    },
    {
      key: "saleStatus",
      label: "上架状态",
      render(data) {
        return productEnum.ShopGoodsSaleStatusEnums.find(v => v.id == data)?.text;
      }
    },
    {
      key: "price",
      label: "销售价格"
    },
    {
      key: "createTime",
      label: "创建时间"
    },
    {
      key: "updateTime",
      label: "修改时间"
    },
    {
      frameType: "multi",
      key: "multi",
      label: "操作",
      separate: "",
      multi: [
        {
          frameType: "link",
          value: "删除",
          key: "deleteBtn",
          icon: useOffineIcon("ep:delete"),
          click: showDel,
          visible: hasPerms("/product/goods/del")
        },
        {
          frameType: "link",
          value: "修改",
          key: "updateBtn",
          icon: useOffineIcon("ep:edit"),
          click: showUpdate,
          visible: hasPerms("/product/goods/update")
        }
      ]
    }
  ]
});
const toolbarConfig = shallowReactive<ToolbarConfig>({
  buttons: [
    {
      value: "添加商品",
      click: showAdd,
      visible: hasPerms("/product/goods/add")
    }
  ]
});
const page = useTemplateRef<PageInstance>("page");
function showAdd() {
  gotoPage("/product/goods/GoodsAdd");
}
function showUpdate(vo: ShopGoodsVo) {
  gotoPage("/product/goods/GoodsUpdate?id=" + vo.id);
}

function addSuccess() {
  page.value.onSearch();
}
function updateSuccess() {
  page.value.onSearch();
}

function showDel(vo: ShopGoodsVo) {
  msgConfirm("确认删除吗？", async () => {
    let res = await delGoods({ id: vo.id });
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("删除成功");
      page.value.onSearch();
    }
    return res;
  });
}
</script>
